<template>
	<view style="transition: all 0.3s;">
		<u-popup :show='show' @close='$emit("show_fun");' round='16rpx'>
			<view>
				<view class="popupTitle">
					<u-icon name="close" size="30rpx" @click="$emit('show_fun')"></u-icon>
					<text>评价</text>
					<u-icon name="close" size="30rpx" color="#fff"></u-icon>
				</view>
				<view style="height:70vh;display: flex;flex-direction: column;">
					<view style="flex: 1;">
						<z-paging ref="paging" :fixed="false" v-model="data" @query="queryData" default-page-no="1"
							default-page-size="5" style="height: 100%;">
							<view class="Comments" v-for="(item,index) in data" :key="index">
								<view>
									<view>
										<u-avatar size="52rpx" :src="users[item.user_id].avatar"></u-avatar>
										<view style="margin-left: 20rpx;">
											<view style="margin-bottom: 20rpx; font-weight: bold;">
												{{users[item.user_id].nick_name}}
											</view>
											<view style="margin-bottom: 20rpx;">{{item.content}}</view>
											<view>
												<text>{{item.created_at | changeTime}}</text>
												<text @click="click(item)" style="margin-left: 20rpx;">回复</text>
												<text v-if='item.children_count&&!develop.includes(item.id)'
													style="margin-left: 20rpx;"
													@click="getReply(item.id)">展开{{item.children_count}}条回复</text>
											</view>
										</view>
									</view>
								</view>
								<view style="margin-left: 10vw;flex-direction: column;" v-if="develop.includes(item.id)">
									<view class="Comments" style="justify-content: space-between;"
										v-for="(item2,index2) in item.chidren" :key="index2">
										<view>
											<view>
												<u-avatar size="42rpx" :src="item2.user.avatar"></u-avatar>
												<view style="margin-left: 20rpx;">
													<view style="margin-bottom: 20rpx;" v-if='item2.reply_id'>
														{{item2.user.nick_name}}
													</view>
													<view style="margin-bottom: 20rpx;" v-else>{{item2.user.nick_name}}回复:
													</view>
													<view style="margin-bottom: 20rpx;">
														{{item2.content}}
														<text style="color: #3975C6;" v-if="item2.reply_id">
															@{{item2.reply.user.nick_name}}
														</text>
													</view>
													<view>
														<text>{{item2.created_at | changeTime}}</text>
														<text @click="click(item2)" style="margin-left: 20rpx;">回复</text>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view @click="close(item.id)" style="align-self: flex-end;z-index: 5;">收起回复</view>
								</view>
						
							</view>
						</z-paging>
					</view>
					<view :class="{keyboardheight:height}" :style="{bottom:height}" style="width: 100%;">
						<view class="inputBox">
							<u-avatar size="52rpx" :src="userInfo.avatar"></u-avatar>
							<input @keyboardheightchange='keyboardheightchange' :placeholder="placeholder"
								:adjust-position='false' v-model="value" />
							<text style="font-size: 26rpx;color: #101010;" @click="sumbit">发送</text>
						</view>
					</view>
				</view>

				<u-toast ref="uToast"></u-toast>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: '',
			commentId: '',
		},

		data() {
			return {
				users: {},
				develop: [],
				value: "",
				data: [],
				reply_id: 0,
				parent_id: 0,
				placeholder: '写评论...',
				user_id: null,
				userInfo: {},
				height: 0
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('user')
		},
		methods: {
			keyboardheightchange(e) {
				console.log(e.detail)
				const {
					height
				} = e.detail
				if (height) {

					this.height = height + 'px'
				} else {

					this.height = 0
				}
			},
			close(id) {
				this.develop.splice(this.develop.indexOf(id), this.develop.indexOf(id) + 1);
			},

			click(item) {
				console.log(item)
				if (item.parent_id) {
					this.reply_id = item.id
					this.parent_id = item.parent_id
					this.user_id = item.user_id
					this.placeholder = `给@${item.user.nick_name}留言...`
				} else {
					this.parent_id = item.id
					this.reply_id = 0
					this.placeholder = `给@${this.users[item.user_id].nick_name}留言...`
				}

			},
			queryData(pageNo, pageSize) {
				let sendData = {
					page: pageNo,
					size: pageSize
				};
				this.get(sendData);
			},
			async get(sendData) {
				uni.showLoading({
					title: "加载中..."
				})
				const res = await this.$api.Comment.List('run',this.commentId, sendData)
				uni.hideLoading()
				if (res) {
					
					this.$refs.paging.complete(res.data.comments.data.map(item => {
						return {
							...item,
							chidren: []
						}
					}));

					this.users = {
						...this.users,
						...res.data.users
					}
					this.$emit('getUsers',this.users)
				}

			},
			sumbit() {

				if (this.value.length < 6) {
					this.$refs.uToast.show({
						type: 'error',
						message: "不能小于6个字",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
					return
				}
				let obj = {
					content: this.value,
					parent_id: this.parent_id,
					reply_id: this.reply_id
				}
				this.reply_id = 0
				this.parent_id = 0
				this.placeholder = `写评论...`
				this.value = ''
				this.$api.Comment.Add('run',this.commentId, obj).then(res => {
					if (obj.parent_id == 0) {
						this.data.unshift({
							content: obj.content,
							parent_id: obj.parent_id,
							reply_id: obj.reply_id,
							user_id: this.userInfo.id,
							children_count: 0,
							chidren: [],
							id: res.data.comment_id
						})
						this.users[this.userInfo.id] = this.userInfo
						return
					}
					if (obj.parent_id != 0) {
						if (this.develop.includes(obj.parent_id)) {
							this.data.forEach(item => {
								if (item.id == obj.parent_id) {
									item.children_count++
									console.log(item.children_count)
									if (obj.reply_id != 0) {
										item.chidren.unshift({
											content: obj.content,
											parent_id: obj.parent_id,
											reply_id: obj.reply_id,
											user: this.userInfo,
											reply: {
												user: this.users[this.user_id],
											},
											id: res.data.comment_id,
											user_id: this.userInfo.id,
										})
										this.user_id = null
									} else {
										item.chidren.unshift({
											content: obj.content,
											parent_id: obj.parent_id,
											reply_id: obj.reply_id,
											user: this.userInfo,
											id: res.data.comment_id,
											user_id: this.userInfo.id,
										})
									}
								}
							})
						} else {
							this.getReply(obj.parent_id)
						}
					}
				})


			},
			async getReply(id) {

				const res = await this.$api.Comment.ListReply(this.commentId, {
					parent_id: id
				})
				if (res) {

					this.data.forEach(item => {
						console.log(item, id)
						if (item.id == id) {
							item.children_count++
							item.chidren = res.data
						}
					})
					console.log(this.data)
					this.develop.push(id)
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.inputBox {
		border: 1rpx solid #f5f5f5;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		padding-left: 18rpx;
		padding-right: 18rpx;
		font-size: 26rpx;
		color: #101010;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		>input {
			flex: 0.9;
			height: 48rpx;
		}
	}


	.Comments {
		padding-left: 10rpx;
		text-align: left;
		margin: 0 20rpx;
		box-sizing: border-box;
		padding-top: 10rpx;
		font-size: 26rpx;
		border-top: 1rpx solid #f5f5f5;
		margin-bottom: 20rpx;

		>view {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			>view {
				display: flex;
			}
		}
	}

	.showhelp {
		position: relative;
		margin-top: 20rpx;
		text-align: center;
		box-sizing: border-box;
		height: 750rpx;
		padding: 0 0 20rpx;
	}

	.keyboardheight {
		position: fixed;
		z-index: 111111111111111;
		left: 0;
	}
</style>